<template>
  <div>
    <el-row class="search-input">
      <input
        v-model="searchValue"
        @keyup.enter="handleSearch"
        type="text"
        placeholder="请输入想请求的地方 比如:'广州' "
      />
      <i class="el-icon-search" @click="handleSearch"></i>
    </el-row>
    <div class="recommendList">
      推荐：
      <span @click="handleSearchO('广州')">广州</span>
      <span @click="handleSearchO('上海')">上海</span>
      <span @click="handleSearchO('北京')">北京</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
    };
  },
  methods: {
    handleSearch() {
      this.$router.push("/post?city=" + this.searchValue);
    },
    handleSearchO(city) {
      this.searchValue = city;
      this.$router.push("/post?city=" + this.searchValue);
      this.searchValue = "";
    },
  },
};
</script>

<style lang="less" scoped>
.search-input {
  position: relative;
  input {
    width: 654px;
    height: 34px;
    padding: 0 20px;
    border: 3px solid #ffa500;
    outline: none;
  }
  i {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  .el-icon-search {
    font-size: 23px;
    color: #ffa500;
    font-weight: 700;
  }
}
.recommendList {
  margin: 15px 0;
  color: #666;
  font-size: 12px;
  span {
    cursor: pointer;
    margin: 0 4px;
    &:hover {
      color: #ffa500;
    }
  }
}
</style>